import "./index.less"
import React, { useState } from 'react'
import { LoginApi } from '../../api'
import logo from '@/assets/images/logo.png'
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button';
import { useNavigate } from 'react-router-dom'
import { useToast } from "@/hooks/toast"

export default function Login() {
    const navigate = useNavigate()
    const taost = useToast()

    // 定义一个状态，表示当前是注册还是登录
    const [isLoginPage, setIsLoginPage] = useState(true)
    const [username, setUsername] = useState('18877665544')
    const [password, setPassword] = useState('wolfcode123')

    const login = () => {
        LoginApi({
            username, password
        }).then(res => {
            if (res.errCode === 0) {
                // 存token
                localStorage.setItem("token", res.data)
                // 提示用户
                // alert('登录成功')
                taost("登录成功")
                // 跳转
                navigate('/home')
            }
        }).catch(err => {
            taost(err.response.data.message, "error")
        })
    }
    const register = () => { }

    // 定义一个函数，让按钮可以调用
    const clickFn = () => {
        // 数据校验
        // 手机有验证
        // 密码的验证
        isLoginPage ? login() : register()
    }

    return (
        <div className="login">
            <div className="logo">
                <img src={logo} alt="" />
            </div>
            <div className="form">
                <TextField fullWidth variant="outlined" placeholder="请输入手机号" value={username} onChange={(e) => setUsername(e.target.value)} />
                <TextField fullWidth variant="outlined" type="password" placeholder="请输入密码" value={password} onChange={(e) => setPassword(e.target.value)} />
                <Button fullWidth variant="contained" onClick={clickFn}>{isLoginPage ? "直接登录" : "立即注册"}</Button>
            </div>
            <div>
                <Button variant="text" onClick={() => setIsLoginPage(!isLoginPage)}>{isLoginPage ? "去注册" : "返回登录"}</Button>
            </div>
        </div>
    )
}
